<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        transitionName: ""
      }
    },
    methods: {},

  }
</script>

<style>
  #app .mui-content {
    background-color: #fff !important;
  }

  input {
    font-size: 0.24rem;
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999;
    font-size: 0.24rem;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999;
    font-size: 16px;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999;
    font-size: 16px;
  }

  #app {
    height: 100%;
    width: 100%;
    background-color: white;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    margin-top:-0.15rem;
  }

  .data_null .img {
    width: 2.3rem;
    margin: 0 auto;
  }

  .data_null .img img {
    width: 100%;
    height: 100%;
  }

  .data_null .text {
    text-align: center;
    line-height: 1rem;
    color: #999;
    font-size: 0.28rem;
    font-weight: bold;
  }

  .data_null {
    /*display: none;*/
    margin-top: 2rem;
  }


  .menuList {
    position: fixed;
    bottom: 0;
    background: #fff;
    z-index: 99999;
  }
  .menuList ul {
    padding: 0;
    margin: 0;
    display: flex;
    width: 7.5rem;
    box-shadow: 0 0 0.5rem rgba(35, 51, 96, .3);
    height: 55px;
  }
  .menuList ul li {
    flex: 1;
    width: 50%;
    text-align: center;
    list-style: none;
    position: relative;
    top:0.1rem;
    height:55px;
    padding-top:0.1rem;
  }
  .menuList ul li img {
    width: 0.4rem;
  }
  .menuList ul li p {
    font-size: 0.24rem;
    color: #333;
    margin-top:-0.05rem;
  }

  body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  textarea {
    resize: none;
  }

  img {
    display: inline-block
  }

  img, input, textarea, button {
    border: none;
    outline: none;
  }

  i {
    font-style: normal;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    font-size: 0;
    *zoom: 0;
  }

  * {
    touch-action: pan-y;
  }

  .mui-bar-nav ~ .mui-content {
    padding-top: 0;
  }

  .mui-content {
    background-color: #fff;
  }


  /*//fade(过渡)*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  /*//bounce(动画)*/
  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }


  .menuList ul {
    padding: 0;
    margin: 0;
    display: flex;
    width: 7.5rem;
    box-shadow: 0 0 0.5rem rgba(35, 51, 96, .3);
    height: 55px;
  }

  .menuList ul li {
    flex: 1;
    width: 50%;
    text-align: center;
    list-style: none;
  }


  .menuList ul li p {
    font-size: 0.24rem;
    color: #333;
  }

  body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  textarea {
    resize: none;
  }

  img {
    display: inline-block
  }

  img, input, textarea, button {
    border: none;
    outline: none;
  }

  i {
    font-style: normal;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    font-size: 0;
    *zoom: 0;
  }
</style>
